<template>
  <div>

    <div style="margin-top:30px">
      <el-card>
        <div class="btnLayout">
          <el-button
            round
            class="addBtn"
            @click="$emit('createdItem')"
          >{{ textTabel.labelName4 }}</el-button>
          <div v-if="excel">
            <el-button round style="margin-right:10px">下载库区模板</el-button>
            <el-button round style="margin-right:10px">导入库区模板</el-button>
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{color:'#887e7e',backgroundColor:'#f9f6ee',fontSize:'13px'}" :row-class-name="tableRowClassName">
          <el-table-column type="index" label="序号" width="68" align="center" />
          <template v-for="(item,index) in listTable">

            <el-table-column v-if="item.prop==='type'" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center">
              <template #default="{row}">
                <div>
                  {{ item.warehouseType[row.type] || '未知' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.prop==='status'" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center">
              <template #default="{row}">
                <div>
                  {{ row.status===1?'启用':'停用' }}
                </div>
              </template>
            </el-table-column>
            <!-- 温度类型  -->
            <el-table-column v-else-if="item.prop==='temperatureType'" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center">
              <template #default="{row}">
                <div>
                  {{ item.warehouseType[row.temperatureType] || '未知' }}
                </div>
              </template>
            </el-table-column>
            <!-- 承重类型  -->
            <el-table-column v-else-if="item.prop==='bearingType'" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center">
              <template #default="{row}">
                <div>
                  {{ item.bearingObj[row.bearingType] || '中型' }}
                </div>
              </template>
            </el-table-column>
            <!-- 用途属性  -->
            <el-table-column v-else-if="item.prop==='useType'" :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center">
              <template #default="{row}">
                <div>
                  {{ item.userObj[row.useType] || '未知' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else :key="index" :prop="item.prop" :label="item.label" :width="item.width" align="center" />
          </template>
          <el-table-column fixed="right" label="操作" width="179" align="center">
            <template #default="{row}">
              <!-- 操作插槽 -->
              <slot name="btn">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(row)"
                >编辑</el-button>
                <el-button type="text" size="small" @click="changeStatusFn(row)">{{ row.status===1 ? '停用': '启用' }}</el-button>
                <el-button type="text" size="small">删除</el-button>
              </slot>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="middle-page" style="height: 84px;">
          <el-pagination
            :current-page="listPage.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+objData.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 切换 状态 弹窗 -->
    <el-dialog
      :title="`确定${title}`"
      :visible="statusShow"
      width="30%"
      @abort="CloseFn"
    >
      <span>确定要{{ title }}:{{ rowItem.name }}吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="CloseFn">取 消</el-button>
        <el-button round type="primary" @click="submitStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    excel: {
      type: Boolean,
      default: false
    },
    textTabel: {
      type: Object,
      default: () => {}
    },
    listPage: {
      type: Object,
      default: () => {}
    },
    objData: {
      type: Object,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => {}
    },
    listTable: {
      type: Array,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    rowItem: {
      type: Object,
      default: () => {}
    }

  },
  data() {
    return {
      statusShow: false // 切换状态弹出层
    }
  },
  methods: {
    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'success-row' // 这是类名
      } else {
        return ''
      }
    },
    // 确定切换状态
    async submitStatus() {
      this.$emit('submitStatusFn')
    },
    CloseFn() { // 关闭弹窗 close
      this.statusShow = false
    },
    changeStatusFn(row) { // 切换状态点击
      this.$emit('changeStatus', row)
      this.statusShow = true
    },
    resetPage() { // 重置搜索
      this.listPage = {}
    },

    handleCurrentChange(val) { // 分页器 当前页
      this.$emit('handleCurrentChangeFn', val)
    },
    handleSizeChange(val) { // 当前页的 条数
      this.$emit('handleSizeChangeFn', val)
    },
    handleClick(row) { // 编辑回显的数据 当前项的数据
      this.$emit('handleClickFn', row)
    }
  }

}

</script>

<style lang='scss' scoped>
.padding-all {
  padding: 20px 30px 30px 30px;

  .title_felx {
    display: flex;
    align-items: center;
  }
  .font {
    display: block;
    margin-bottom: 8px;
    color: #887e7e;
    font-size: 12px;
  }
}

.middle-page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.addBtn{
  width: 108px;
  height: 40px;
  background-color: #00be76;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin:0px 0 20px 10px;
}
.btn{
  transform: translateY(20px);
}
.btnLayout{
  display: flex;
  justify-content: space-between;
}
::v-deep .el-form-item{
  width: 30%;
  padding: 0;
  margin:0;
  margin-right: 25px;
  .el-select{
    width:100% ;
  }
}
::v-deep .el-input__inner {
  background-color: #f8f5f5;
}
::v-deep .el-table__row.success-row {
  background-color:#fdfcf9 !important;

}
 ::v-deep .el-table__body  tr:hover > td {
     background-color: #fff6e2 !important;
 }

</style>
